<template>
    
    <el-menu
        active-text-color="#ffd04b"
        background-color="#191a23"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
        router
    >
        
        <template v-for="(item, i) in menus" >

            <el-menu-item :index="item.path" :key="item.path" v-if="getChildrenSize(item.children) <= 1">
                <el-icon>
                    <component :is="item.meta.icon" />
                </el-icon>
                <span>{{ item.meta.title }}</span>
            </el-menu-item>

            <el-sub-menu v-if="getChildrenSize(item.children) > 1" :index="i" :key="i">
                <template #title>
                    <el-icon>
                        <component :is="item.meta.icon" />
                    </el-icon>
                    <span>{{ item.meta.title }}</span>
                </template>
                <template v-for="(citem, k) in item.children">
                    <el-menu-item v-if="isShow(citem.meta)" :index="`${item.path}/${citem.path}`" :key="`${item.path}/${citem.path}`">{{citem.meta.title}}</el-menu-item>
                </template>
                
            </el-sub-menu>







        </template>





    </el-menu>

</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'
export default {
    name: 'AsideMenu',
    setup () {
        
        const router = useRouter();
        const route = useRoute();
        const data = reactive({
            menus: []
        })
        onMounted(() => {
            const menus = router.getRoutes().filter((r) => {
                return r.meta.isMenu === true
            })
            // console.log(menus)
            data.menus = menus
            //console.log(data)
        })


        const getChildrenSize = (children) => {
            if (children == null) {
                return 0
            } else {
                return children.length
            }
        }

        const isShow = (meta) => {
            if(meta == null || meta.hidden == null) {
                return true
            } else {
                return !meta.hidden
            }
        }

        const getPath = (item) => {
            console.log(item)
            return item.path
        }

        return {
            ...toRefs(data),
            getChildrenSize,
            isShow,
            getPath
        }
    }
}
</script>

<style lang="scss" scoped>

</style>